Day16 當SwiftUI遇到石虎抱抱

11th鐵人賽

mikewang

團隊G社三劍客

2019-10-02 12:59:11

2037 瀏覽

分享至

20191002

前言

今天我們要建立UI為SwiftUI的專案，並實際來練習Path繪圖，由於SwiftUI還沒有時間深入的研究，因此先練習一個小題目(ref5)。
在兩年前有去台北上過彼得潘的課程，現在重頭開始學習iOS App開發，也可以接者練習網站上的一百道題目考驗(ref6)，有許多題目都非常的有趣。

現在，我們馬上開始！

練習目標

今天我們要建立Swift專案，並利用Path來描繪可愛的石虎，首先參考一下原圖

圖片來源: ref4
圖片來源: 南投縣友善石虎農作促進會

練習過程

首先建立SwiftUI的專案，建立的過程都與Day13相同(如下方連結)，唯一要注意的是User Interface要選『SwiftUI』(如下圖)

Day13 在Swift的世界中朗誦HelloWorld (1)
https://ithelp.ithome.com.tw/articles/10221914

SwiftUI專案

首先加入原圖當作背景圖，置放於下方區塊，繪圖區在我們的左上角

// background
            Image("Cat3")
                .resizable()
                .scaledToFit()
                .frame(width: 300, height: 400, alignment: .bottom)

接者畫出個別區塊，首先是頭部的區塊

// MARK: - HeadLayer
Group {
    Path { (path) in
        path.move(to: CGPoint(x: 53, y: 100))
        path.addQuadCurve(to: CGPoint(x: 66, y: 17), control:
CGPoint(x: 48, y: 50))
        path.addQuadCurve(to: CGPoint(x: 119, y: 80), control:
CGPoint(x: 90, y: 30))
        path.addLine(to: CGPoint(x: 164, y: 82))
        path.addQuadCurve(to: CGPoint(x: 214, y: 13), control:
CGPoint(x: 178, y: 38))
        path.addQuadCurve(to: CGPoint(x: 230, y: 96), control:
CGPoint(x: 234, y: 60))
        path.addQuadCurve(to: CGPoint(x: 239, y: 193), control
CGPoint(x: 265, y: 138))
        path.addQuadCurve(to: CGPoint(x: 170, y: 242), control
CGPoint(x: 235, y: 215))
        path.addQuadCurve(to: CGPoint(x: 80, y: 230), control:
CGPoint(x: 130, y: 225))
        path.addQuadCurve(to: CGPoint(x: 53, y: 100), control:
CGPoint(x: 5, y: 175))
        path.closeSubpath()
    }
    .stroke(Color(red: 165/255, green: 113/255, blue: 80/255),
lineWidth:15)
    
    Path { (path) in
        path.move(to: CGPoint(x: 53, y: 100))
        path.addQuadCurve(to: CGPoint(x: 66, y: 17), control:
CGPoint(x: 48, y: 50))
        path.addQuadCurve(to: CGPoint(x: 119, y: 80), control:
CGPoint(x: 90, y: 30))
        path.addLine(to: CGPoint(x: 164, y: 82))
        path.addQuadCurve(to: CGPoint(x: 214, y: 13), control:
CGPoint(x: 178, y: 38))
        path.addQuadCurve(to: CGPoint(x: 230, y: 96), control:
CGPoint(x: 234, y: 60))
        path.addQuadCurve(to: CGPoint(x: 239, y: 193), control
CGPoint(x: 265, y: 138))
        path.addQuadCurve(to: CGPoint(x: 170, y: 242), control
CGPoint(x: 235, y: 215))
        path.addQuadCurve(to: CGPoint(x: 80, y: 230), control:
CGPoint(x: 130, y: 225))
        path.addQuadCurve(to: CGPoint(x: 53, y: 100), control:
CGPoint(x: 5, y: 175))
        path.closeSubpath()
    }
    .fill(Color(red: 205/255, green: 154/255, blue: 114/255))
}